<template>
    <view class="container">
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <up-form labelPosition="left" :model="form" :rules="rules" ref="form1" :border-bottom="true" class="form"
            labelWidth="150rpx" labelAlign="left">
            <up-form-item label="昵称" prop="form.name" :border-bottom="true" ref="item1">
                <up-input placeholder="请输入昵称" border="none" inputAlign="right"></up-input>
            </up-form-item>
            <up-form-item label="手机号码" prop="form.name" :border-bottom="true" ref="item1">
                <up-input inputAlign="right" placeholder="请输入手机号码" border="none"></up-input>
            </up-form-item>
            <!-- <up-form-item label="性别" prop="form.sex" :border-bottom="true" @click="showSex = true; hideKeyboard()"
                ref="item1">
                <up-input placeholder="请选择性别" border="none" inputAlign="right"></up-input>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item> -->
            <up-form-item label="性别" prop="form.sex" :border-bottom="true" @click="showSex = true; hideKeyboard()"
				ref="item1">
				<!-- <up-input placeholder="请选择性别" border="none" inputAlign="right"></up-input>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template> -->
				<up-radio-group v-model="radiovalue1" placement="column" @change="groupChange" class="u-flex">
					<up-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange" activeColor="#f0ad4e"
						class="radio-box">
					</up-radio>
				</up-radio-group>
			</up-form-item>
            <up-form-item label="生日" prop="form.name" :border-bottom="false" ref="item1"
                @click="show = true; hideKeyboard()">
                <up-datetime-picker :show="show" v-model="value1" mode="date"></up-datetime-picker>

                <up-input placeholder="请选择生日" v-model="value1" border="none" inputAlign="right"></up-input>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <up-form-item label="入会时间" prop="form.name" :border-bottom="true" ref="item1"
                @click="show = true; hideKeyboard()">
                <up-datetime-picker :show="show" v-model="value1" mode="date"></up-datetime-picker>
                <up-input placeholder="请选择入会时间" v-model="value1" border="none" inputAlign="right"></up-input>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
        </up-form>
        <up-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
            @close="showSex = false" @select="sexSelect">
        </up-action-sheet>
        <view class="footer">
            <up-button @click="submit" type="warning" shape="circle">保存</up-button>
        </view>
    </view>
</template>
<script setup ts>
import { ref, reactive } from 'vue';
import { onReady } from '@dcloudio/uni-app';
// 基本案列数据
const radiolist1 = reactive([
	{
		name: '男',
		disabled: false,
	},
	{
		name: '女',
		disabled: false,
	},])
const show = ref(false);
const value1 = ref('2024-10-20');
// 使用 reactive 创建响应式状态  
const state = reactive({
    showSex: false,
    form: {
        name: 'uview-plus UI',
        sex: '',
    },
    actions: [
        { name: '男' },
        { name: '女' },
        { name: '保密' },
    ],
    rules: {
        'userInfo.name': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change'],
        },
        'userInfo.sex': {
            type: 'string',
            max: 1,
            required: true,
            message: '请选择男或女',
            trigger: ['blur', 'change'],
        },
    },
    radio: '',
    switchVal: false,
    rules: {
        'userInfo.name': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
        },
        code: {
            type: 'string',
            required: true,
            len: 4,
            message: '请填写4位验证码',
            trigger: ['blur']
        },
        'userInfo.sex': {
            type: 'string',
            max: 1,
            required: true,
            message: '请选择男或女',
            trigger: ['blur', 'change']
        },
        radiovalue1: {
            type: 'string',
            min: 1,
            max: 2,
            message: '生命是美好的，请不要放弃治疗',
            trigger: ['change']
        },
        checkboxValue1: {
            type: 'array',
            min: 2,
            required: true,
            message: '不能太宅，至少选两项',
            trigger: ['change']
        },
        intro: {
            type: 'string',
            min: 3,
            required: true,
            message: '不低于3个字',
            trigger: ['change']
        },
        hotel: {
            type: 'string',
            min: 2,
            required: true,
            message: '请选择住店时间',
            trigger: ['change']
        },
        'userInfo.birthday': {
            type: 'string',
            required: true,
            message: '请选择生日',
            trigger: ['change']
        },
    },
});

// 使用 ref 创建响应式引用  
const formRef = ref(null);

// 定义方法  
function sexSelect(e) {
    state.model1.userInfo.sex = e.name;
    if (formRef.value) {
        formRef.value.validateField('userInfo.sex');
    }
}


const datetimePickerRef = ref(null);

const formatter = (type, value) => {
    if (type === 'year') {
        return `${value}年`;
    }
    if (type === 'month') {
        return `${value}月`;
    }
    if (type === 'day') {
        return `${value}日`;
    }
    return value;
};

onReady(() => {
    // 微信小程序需要用此写法
    datetimePickerRef.value.setFormatter(formatter);
});
</script>
<style lang="scss" scoped>
.container {
	.u-flex {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.radio-box {
		margin-right: 20rpx;
	}
    .form {
        padding: 30rpx;
        background: #fff;
    }

    .footer {
        margin-top: 50rpx;
        padding: 20rpx 60rpx;
    }
}
</style>